const {resolve} = require('path');
//引用插件 该插件下载命令为：npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
/**
 * 1、entry
 *  入口（entry）指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图
 */
// entry: './src/index.js',

//webpack打包CSS资源 npm i css-loader style-loader -D
//1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
//2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里
entry: './src/index2.js',


   /* // 多个入口和多个出口的情况--入口文件
    // 1. String ：单入口， 打包成一个chunk,输出一个bundle文件，chunk的名称为默认。

    // entry: './src/index.js',
// 2. Array ： 多入口， 写多个入口，所有入口文件形成一个chunk(名称默认), 输出只有一个bundle, chunk名称默认
// entry: ["./src/two.js",'./src/index.js'],
// 3. Object: 多入口， 有几个入口文件就生成几个chunk， 并输出几个bundle文件， chunk的名称是key
/!*entry: {
    two: "./src/two.js",
    index:'./src/index.js'
},*!/
// 4. 特殊用法：
entry: {
    // 数组中所有入口文件生成一个chunk, 输出一个bundle文件， chunk的名称是key
    onetwo: ["./src/one.js","./src/two.js"],
    // 形成一个chunk, 输出一个bundle文件
    index:'./src/index.js'
},*/
/*
// 多个entry
entry: {
    vendor:  ['./src/js/jquery','./src/js/common.js'],
    index:  "./src/js/index.js",
    cart:  "./src/js/cart.js"
},*/



    /**
 * 2、output
 *  输出（output）指示webpack打包后的资源 bundles 输出到哪里，以及如何命名。
 */
    output: {
        filename: "[name].js",
        path: resolve(__dirname,'build')
    },

    /**
 * 3、loader
 *  loader让webpack能够去处理那些非JavaScript资源css、img等，将它们处理成webpack能够识别的资源，可以理解成一个翻译过程（webpack自身只能理解js和json）。
 */
    loader: {
        rules:[
            // {
            //     // loader: 'css-style'//如果有一个的写法
            // }
            //webpack打包CSS资源 npm i css-loader style-loader -D
            //1. css-loader 的作用是处理css中的 @import 和 url 这样的外部资源
            //2. style-loader 的作用是把样式插入到 DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里
            {test:/\.css$/,use:['style-loader','css-loader']}//use的使用顺序，从右到左 从上到下
        ]
    },

    /**
 * 4、plugins
 *  插件（plugins）可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
 */
    plugins: [
/*        new HtmlWebpackPlugin({
            //复制 './src/1.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
            template: "./src/1.html",
            filename: "demo.html",
        })*/
        new HtmlWebpackPlugin({
            template: "./src/index2.html",
            filename: "index2.html",
        })
       /* // 默认会创建一个空的， 目的就是自动引入打包的资源（js/css）
        new HtmlWebpackPlugin({
            //复制 './src/1.html'文件， 并自动引入打包输出的所有资源（JS/CSS）
            template: "./src/1.html",
            filename: "demo.html",
            // 压缩html代码
            minify: {
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments:true
            }
        })*/
        /*//负责打包html文件  将js注入到html中，minify压缩html    ----webpack打包多html开发案例
        new HtmlWebpackPlugin({
            filename: "index1.html",
            template: "./src/index1.html",
            chunks: ["index","vendor"],
            minify:{
                removeComment:true,
                collapseWhitespace:true
            }
        }),

        new HtmlWebpackPlugin({
            filename: "cart1.html",
            template: "./src/cart1.html",
            chunks: ["cart","vendor"]
        }),*/

    ],

    /**
 * 5、mode
 *  模式（mode）指示webpack使用相应模式的配置。
 *  开发模式（development）：配置比较简单，能让代码本地调试运行的环境。
 *  生产模式（production）：代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
 *  都会自动启用一些插件，生产模式使用插件更多
 */
mode: "development"
}